<template>
  <div class="Bottle">
    <div class="box">
      <div class="list">
        <div v-for="(x, y) in defalutArr" :key="y" :style="{ background: colors[x] }" @click="selectBottle(x, y)">
          {{ x }}
        </div>
      </div>
      <div class="top">
        <div v-for="(x, y) in selectArr" :key="y" :style="{ background: colors[x] }" @click="resetBottle(x, y)">
          <span>{{ x }}</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="bottom">
        <div v-for="(x, y) in rightOrder" :key="y">
          ？
        </div>
      </div>
    </div>
    <div class="btn">
      <div><el-button type="success" @click="confirm"> 确认 </el-button></div>
      <div><el-button @click="reset"> 重置 </el-button></div>
      <div>
        步数：{{ step }}
      </div>
      <div>
        摆对了{{ right }}个 瓶子
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const colors = [
  '', 'red', 'orange', 'purple', 'green', 'blue'
]
let defalutArr = ref([
  1, 2, 3, 4, 5
])
let selectArr = ref([])
const rightOrder = ref([])
const right= ref(0)
const step = ref(0)
onMounted(() => {
  startGame()
})
function reset(){
  defalutArr.value = [1, 2, 3, 4, 5]
  selectArr.value = []
  step.value = 0
  right.value = 0
}

function selectBottle(x, y) {
  selectArr.value.push(x)
  defalutArr.value.splice(y, 1)
  step.value++
}
function resetBottle(x, y){
  defalutArr.value.push(x)
  selectArr.value.splice(y, 1)
}
function confirm() {
  right.value = countSamePositions(rightOrder.value, selectArr.value)
  // console.log(right.value)
  // console.log(rightOrder.value, selectArr.value)
}
function startGame() {
  let numbers = [1, 2, 3, 4, 5];
  numbers.sort(() => Math.random() - 0.5);
  rightOrder.value = numbers
}

function countSamePositions(arr1, arr2) {
  const minLength = Math.min(arr1.length, arr2.length);
  return arr1.map((_, i) => i < minLength && arr1[i] === arr2[i]).reduce((acc, curr) => acc + (curr ? 1 : 0), 0);
}
</script>
<style scoped lang="scss">
.box {
  width: 500px;

  >div {
    width: 100%;
    height: 60px;
    display: flex;

    >div {
      width: 50px;
      height: 50px;
      color: #fff;
      border: 1px solid #fff;
      margin: 5px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }

  .line {
    width: 100%;
    height: 2px;
    background-color: #fff;
    margin: 10px 0;
  }
}
.btn{
  margin-top: 20px;
  display: flex;
  >div{
    margin-right: 20px;
  }
}
</style>
